.homePageDrawerComponent {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
    display: flex;
    justify-content: end;

    .homePageDrawerComponent-content {
        position: relative;
        background-color: rgba(23, 161, 230, 0.1);
        border-left: 1px solid rgba(23, 161, 230, 0.3);
        backdrop-filter: blur(10px);
    }

    .homePageDrawerComponent-contentOpen {
        animation: open-item 0.3s ease-in forwards;

    }

    .homePageDrawerComponent-contentClose {
        animation: close-item 0.3s ease-in forwards;
    }

    @keyframes open-item {
        0% {
            left: 100%;

        }

        25% {
            left: 75%;
        }

        50% {
            left: 50%;
        }

        75% {
            left: 25%;
        }

        100% {
            left: 0;
        }
    }

    @keyframes close-item {
        20% {
            left: 20%;

        }

        40% {
            left: 40%;
        }

        60% {
            left: 60%;
        }

        80% {
            left: 80%;
        }

        100% {
            left: 100%;
        }
    }

}